CSS 响应式设计

响应式设计的三大原则如下

1、移动优先。这意味着在实现桌面布局之前先构建移动版的布局 2、@media 规则。使用这个样式规则，可以为不同大小的视口定制样式。用这一语法，通常叫作媒体查询（media queries），写的样式只在特定条件下才会生效。 3、流式布局。这种方式允许容器根据视口宽度缩放尺寸

移动优先

响应式设计的第一原则就是移动优先（mobile first），顾名思义就是构建桌面版之前要先构建移动端布局。这样才能确保两个版本都生效。开发移动版网页有很多限制：屏幕空间受限、网络更慢。用户跟网页交互的方式也不一样：可以打字，但是用着很别扭，不能将鼠标移动到元素上触发效果等。如果一开始就设计一个包含全部交互的网站，然后再根据移动设备的限制来制约网站的功能，那么一般会以失败告终。

而移动优先的方式则会让你设计网站的时候就一直想着这些限制。一旦移动版的体验做好了（或者设计好了），就可以用“渐进增强”（progressive enhancement）的方式为大屏用户增加体验。

媒体查询

响应式设计的第二个原则是使用媒体查询。媒体查询（media queries）允许某些样式只在页面满足特定条件时才生效。这样就可以根据屏幕大小定制样式。可以针对小屏设备定义一套样式，针对中等屏幕设备定义另一套样式，针对大屏设备再定义一套样式，这样就可以让页面的内容拥有多种布局。

媒体查询使用 @media 规则选择满足特定条件的设备。一条简单的媒体查询如下代码所示。

@media (min-width: 560px) {
 .title > h1 {
 font-size: 2.25rem;
 } 
}

在最外层的大括号内可以定义任意的样式规则。@media 规则会进行条件检查，只有满足所有的条件时，才会将这些样式应用到页面上。

响应式的断点

通常来说，移动优先的开发方式意味着最常用的媒体查询类型应该是 min-width。在任何媒体查询之前，最先写的是移动端样式，然后设置越来越大的断点。

最优先的是移动端样式，因为它们不在媒体查询里，所以这些样式对所有断点都有效。然后是针对中等屏幕的媒体查询，其中的规则基于移动端样式构建并且会覆盖移动端样式。最后是针对大屏幕的媒体查询，在这里添加网页最后的布局。

有的设计可能只需要一个断点，有的设计可能需要多个断点。对网页上有很多元素来讲，无须给每个断点都添加样式，因为在小屏幕或者中等屏幕的断点下添加的样式规则在大屏幕的断点下也完全有效。

有时候移动端的样式可能很复杂，在较大的断点里面需要花费较大篇幅去覆盖样式。此时需要将这些样式放在 max-width 媒体查询中，这样就只对较小的断点生效，但是用太多的 max-width 媒体查询也很有可能是没有遵循移动优先原则所致。max-width 是用来排除某些规则的方式，而不是一个常规手段。

响应式图片

在响应式设计中，图片需要特别关注。不仅要让图片适应屏幕，还要考虑移动端用户的带宽限制。图片通常是网页上最大的资源。首先要保证图片充分压缩。在图片编辑器中选择 “Save for Web” 选项能够极大地减小图片体积，或者用别的图片压缩工具压缩图片，比如 tinypng 网站。还要避免不必要的高分辨率图片，而是否必要则取决于视口大小。也没有必要为小屏幕提供大图，因为大图最终会被缩小

响应式图片的最佳实践是为一个图片创建不同分辨率的副本。如果用媒体查询能够知道屏幕的大小，就不必发送过大的图片，不然浏览器为了适配图片也会将其缩小，使用响应式技术给不同屏幕尺寸提供最合适的图片。

/* 给移动设备提供最小的图 */
.hero {
 padding: 2em 1em;
 text-align: center;
 background-image: url(coffee-beans-small.jpg);
 background-size: 100%;
 color: #fff;
 text-shadow: 0.1em 0.1em 0.3em #000;
}

/* 给中等屏幕提供稍大的图 */
@media (min-width: 35em) {
 .hero {
 padding: 5em 3em;
 font-size: 1.2rem;
 background-image: url(coffee-beans-medium.jpg);
 } 
}

/* 给大屏幕提供完整分辨率的图 */
@media (min-width: 50em) {
 .hero {
 padding: 7em 6em;
 background-image: url(coffee-beans.jpg);
 } 
}

在不同屏幕的浏览器上加载这样的网页，根本看不出有什么区别。这就是关键所在。在小断点下，屏幕尺寸不够宽，反正显示不了完整分辨率的图，但是能节省几百 KB 的流量。在图片较多的网页上，累计节省的流量就能够显著提升网页加载速度。

使用 srcset 提供对应的图片

媒体查询能够解决用 CSS 加载图片的问题，但是 HTML 里的 <img> 标签怎么办呢？对于这种行内图片，有另一个重要的解决方法：srcset 属性（“source set”的缩写）

这个属性是 HTML 的一个较新的特性。它可以为一个 <img> 标签指定不同的图片 URL，并指定相应的分辨率。浏览器会根据自身需要决定加载哪一个图片

流式布局

流式布局，有时被称作液体布局（liquid layout），指的是使用的容器随视口宽度而变化。它跟固定布局相反，固定布局的列都是用 px 或者 em 单位定义。固定容器（比如，设定了 width: 800px 的元素）在小屏上会超出视口范围，导致需要水平滚动条，而流式容器会自动缩小以适应视口。

在流式布局中，主页面容器通常不会有明确宽度，也不会给百分比宽度，但可能会设置左右内边距，或者设置左右外边距为 auto，让其与视口边缘之间产生留白。也就是说容器可能比视口略窄，但永远不会比视口宽。

在主容器中，任何列都用百分比来定义宽度（比如，主列宽 70%，侧边栏宽 30%）。这样无论屏幕宽度是多少都能放得下主容器。用 Flexbox 布局也可以，设置弹性元素的 flex-grow 和 flex-shrink（更重要），让元素能够始终填满屏幕。要习惯将容器宽度设置为百分比，而不是任何固定的值